import React from 'react';

import './static/css/login.css';
import $ from 'jquery';
import {browserHistory} from 'react-router';
import axios from 'axios';

class Register3 extends React.Component{
    constructor(props){
        super(props);
    }
     componentDidMount(){
       //隐藏text block，显示password block
     function showDialog(str){
        $(".alertbox").html(str)
            $(".alertbox").css("opacity","1");
            var width = parseInt($(".alertbox").css("width"))/2;
            $(".alertbox").css("margin-left",-width);
            $(".alertbox").stop().animate({
                opacity: 0  
            }, 3000) 
    }
    $(".submitBtn").click(function(){
        var result=$(".password").val().replace(/(^\s*)|(\s*$)/g, "");  
        if(result==""){
            showDialog("密码不能为空！");
        }else if(result!=$(".passwordAgain").val()){ 
            showDialog("两次密码输入不一致！");
        }else {
            axios.post('http://127.0.0.1:2000/api/register',{tel:localStorage.getItem("tel"),password:result})
            .then(function (response) {
                localStorage.setItem("pwd",result)
                alert(response.data.mes);
                browserHistory.push('Login');
            })
            .catch(function (error) {
                console.log(error);
            });  
             
        }  
    })

    }
    render(){
        return(
            <div className="register3">
               <header className="header7">
                    <a href=""><i className="iconfont">&#xe607;</i></a> 注册
                </header>
                <p className="tip">输入密码和确认密码，点击确定完成注册</p>
                <div className="formbox">
                <div>
                    <input type="password" placeholder="密码"  className="password"/>
                </div>
                <div>
                    <input type="passwordAgain" placeholder="确认密码"   className="passwordAgain"/>
                </div>
            </div>
            <button className="submitBtn">确定</button>
                <div className="alertbox"></div>
            </div>
        )
    }
}

export default Register3;